<template>
    <div class="payment">
      <header>
          在线支付
      </header>
      <div class="context">
          <div class="title">订单信息：</div>
          <div class="addr">
              <div>
                  <p>万家饺子（软件园E18店）<i class="fa fa-caret-down"></i></p>
                  <span>￥0.00</span>
              </div>
          </div>
          <div class="purchaseInfo">
              <ul>
                  <li>
                      <p>纯肉鲜肉（水饺） x 2</p>
                      <span>￥16</span>
                  </li>
                  <li>
                      <p>纯肉鲜肉（水饺） x 2</p>
                      <span>￥15</span>
                  </li>
              </ul>
              <div class="ps">
                  <p>配送费</p>
                  <span>￥3</span>
              </div>
          </div>
          <div class="payway">
              <ul>
                  <li>
                      <img src="/img/alipay.png">
                      <input type="radio" >
                  </li>
                  <li>
                      <img src="/img/wechat.png">
                      <input type="radio" checked>
                  </li>
              </ul>
          </div>
  
      </div>
      <div class="pay_button">
          <button @click="payToPaySuccess()">确认支付</button>
      </div>
  
  
      <Footer></Footer>
    </div>
  </template>
  
<script>
import Footer from '@/components/Footer.vue'


export default {
    components:{
        Footer
    },
    methods:{
        payToPaySuccess(){
            this.$router.push('/paySuccess');
        }
    }
}
</script>
  
<style scoped>

.payment{
    width: 100%;
}

.payment header{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0097FF;
    font-size: 4.8vw;
    height: 12vw;
    color: white;
    font-weight: 700;
}

.payment .context .title{
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}

.payment .context .addr div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment .context .addr p{
    font-size: 3vw;
    color: #666;
    margin-left: 4vw;
}

.payment .context .addr div span{
    font-size: 3vw;
    color: red;
    margin-right: 4vw;
}

.payment .context .addr div span{
    font-size: 3vw;
    color: red;
    margin-right: 4vw;
}

.payment .context .paychaseInfo{
    width: 100%;
}

.payment .context .purchaseInfo ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2vw 0vw;
}

.payment .context .purchaseInfo ul li p{
    font-size: 2.5vw;
    color: #666;
    margin-left: 4vw;
}
.payment .context .purchaseInfo ul li span{
    font-size: 2.5vw;
    margin-right: 4vw;
}

.payment .context .purchaseInfo .ps{
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.payment .context .purchaseInfo .ps p{
    font-size: 2.8vw;
    color: #666;
    margin-left: 4vw;
}
.payment .context .purchaseInfo .ps span{
    font-size: 2.8vw;
    margin-right: 4vw;
}


.payment .context .payway{
    width: 100%;
}
.payment .context .payway li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4vw 0vw;
}
.payment .context .payway li img{
    margin-left: 4vw;
}
.payment .context .payway input{
    margin-right: 4vw;
}

button{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.payment .pay_button{
    width: 95%;
    margin: 10vw auto;
}

.payment .pay_button button{
    width: 100%;
    height: 10vw;
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #38CA73;
    color: #fff;
    font-weight: 700;

}
</style>